﻿@page "/Anchor"

@using FluentUI.Demo.Shared.Pages.Anchor.Examples

<PageTitle>@App.PageTitle("Anchor")</PageTitle>

<h1>Anchor</h1>

<p>As defined by the <a href="https://www.w3.org/MarkUp/html3/anchors.html" target="_blank" rel="noopener noreferrer">W3C</a>:</p>
<blockquote>
    <p>
        An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.
    </p>
</blockquote>
<p>
    <code>&lt;FluentAnchor&gt;</code> wraps the <code>&lt;fluent-anchor&gt;</code> element, a web component implementation of an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank" rel="noopener noreferrer">HTML anchor element</a> leveraging the Fluent UI design system.
</p>
<p>
    The <code>&lt;FluentAnchor&gt;</code> component supports the same visual appearances as the <code>&lt;FluentButton&gt;</code> component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Simple anchors" Component="@typeof(AnchorDefault)"></DemoSection>

<DemoSection Title="Appearance" Component="@typeof(AnchorAppearance)" CollocatedFiles="@(new[] {"css"})"></DemoSection>

<DemoSection Title="Anchors with icons" Component="@typeof(AnchorIcons)">
    <Description>
        <p>By placing the icon the content of the anchor, it is possible to specify a <code>Color</code> for the icon.</p>
    </Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentAnchor)" />
